<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>积分商城 - 邦伴用户端</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
  <style>
    :root {
      --primary: #ff7e2d;
      --primary-light: #fff3ea;
      --border: #f0f0f0;
      --text-main: #222;
      --text-sub: #888;
    }
    
    body {
      font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
      background-color: #f8f8f8;
      color: var(--text-main);
    }
    
    .app-container {
      width: 375px;
      height: 812px;
      margin: 0 auto;
      background: #fff;
      position: relative;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
      overflow-y: auto;
    }
    
    .primary-color {
      color: var(--primary);
    }
    
    .primary-bg {
      background-color: var(--primary);
    }
    
    .primary-light-bg {
      background-color: var(--primary-light);
    }
    
    .btn-primary {
      background-color: var(--primary);
      color: white;
    }
    
    .btn-outline {
      border: 1px solid var(--primary);
      color: var(--primary);
    }
    
    .tab-active {
      color: var(--primary);
      border-bottom: 2px solid var(--primary);
    }
    
    .card {
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    
    .category-tab {
      padding: 8px 16px;
      font-size: 14px;
      color: var(--text-sub);
      position: relative;
    }
    
    .category-tab.active {
      color: var(--primary);
      font-weight: 500;
    }
    
    .category-tab.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 20px;
      height: 3px;
      background-color: var(--primary);
      border-radius: 2px;
    }
    
    .point-tag {
      background-color: var(--primary-light);
      color: var(--primary);
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 12px;
    }
    
    .exchange-btn {
      background-color: var(--primary);
      color: white;
      border-radius: 20px;
      padding: 4px 12px;
      font-size: 12px;
    }
    
    .modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 50;
    }
    
    .modal-content {
      width: 300px;
      background-color: white;
      border-radius: 12px;
      padding: 20px;
    }
    
    .hidden {
      display: none;
    }
    
    .section-title {
      position: relative;
      padding-left: 12px;
      font-weight: 500;
      margin-bottom: 16px;
    }
    
    .section-title::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 16px;
      background-color: var(--primary);
      border-radius: 2px;
    }
    
    .tab-container {
      display: flex;
      overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE and Edge */
    }
    
    .tab-container::-webkit-scrollbar {
      display: none; /* Chrome, Safari, Opera */
    }
    
    .type-tab {
      padding: 6px 16px;
      font-size: 14px;
      color: var(--text-sub);
      border-bottom: 2px solid transparent;
      white-space: nowrap;
    }
    
    .type-tab.active {
      color: var(--primary);
      border-bottom-color: var(--primary);
    }
  </style>
</head>
<body>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <div class="sticky top-0 z-10 bg-white border-b border-gray-100 px-4 py-3 flex items-center">
      <a href="javascript:history.back()" class="mr-2">
        <i class="fas fa-arrow-left text-lg"></i>
      </a>
      <h1 class="text-lg font-medium flex-1 text-center">积分商城</h1>
      <a href="#" class="ml-2">
        <i class="fas fa-ellipsis-h text-lg"></i>
      </a>
    </div>
    
    <!-- 积分信息 -->
    <div class="bg-white p-4 flex items-center justify-between">
      <div class="flex items-center">
        <i class="fas fa-coins text-yellow-500 mr-2"></i>
        <span class="text-lg font-medium">我的积分: 1280</span>
      </div>
      <a href="member_points_detail.html" class="text-sm text-gray-500">积分明细 <i class="fas fa-chevron-right text-xs ml-1"></i></a>
    </div>
    
    <!-- 分类标签 -->
    <div class="bg-white border-b border-gray-100">
      <div class="tab-container">
        <div class="type-tab active" data-type="all">全部商品</div>
        <div class="type-tab" data-type="physical">实物商品</div>
        <div class="type-tab" data-type="service">服务商品</div>
      </div>
    </div>
    
    <!-- 商品列表 -->
    <div class="p-4">
      <!-- 实物商品区块 -->
      <div id="physical-section">
        <h2 class="section-title mb-4">实物商品</h2>
        
        <div class="grid grid-cols-2 gap-4 mb-6">
          <a href="product_detail.html" class="card bg-white p-3">
            <div class="bg-gray-100 rounded-lg h-32 flex items-center justify-center mb-2">
              <i class="fas fa-wheelchair text-3xl text-gray-400"></i>
            </div>
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="point-tag">1200积分</span>
                <span class="text-xs text-gray-400">已兑换125</span>
              </div>
              <p class="text-sm font-medium mb-1">轻便折叠轮椅</p>
              <p class="text-xs text-gray-500 mb-2">铝合金材质 轻便耐用</p>
              <button class="exchange-btn w-full">立即兑换</button>
            </div>
          </a>
          
          <a href="product_detail.html" class="card bg-white p-3">
            <div class="bg-gray-100 rounded-lg h-32 flex items-center justify-center mb-2">
              <i class="fas fa-heartbeat text-3xl text-gray-400"></i>
            </div>
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="point-tag">800积分</span>
                <span class="text-xs text-gray-400">已兑换210</span>
              </div>
              <p class="text-sm font-medium mb-1">电子血压计</p>
              <p class="text-xs text-gray-500 mb-2">高精准 语音播报</p>
              <button class="exchange-btn w-full">立即兑换</button>
            </div>
          </a>
          
          <a href="product_detail.html" class="card bg-white p-3">
            <div class="bg-gray-100 rounded-lg h-32 flex items-center justify-center mb-2">
              <i class="fas fa-walking text-3xl text-gray-400"></i>
            </div>
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="point-tag">600积分</span>
                <span class="text-xs text-gray-400">已兑换98</span>
              </div>
              <p class="text-sm font-medium mb-1">老人助行器</p>
              <p class="text-xs text-gray-500 mb-2">可折叠 铝合金材质</p>
              <button class="exchange-btn w-full">立即兑换</button>
            </div>
          </a>
          
          <a href="product_detail.html" class="card bg-white p-3">
            <div class="bg-gray-100 rounded-lg h-32 flex items-center justify-center mb-2">
              <i class="fas fa-chair text-3xl text-gray-400"></i>
            </div>
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="point-tag">500积分</span>
                <span class="text-xs text-gray-400">已兑换156</span>
              </div>
              <p class="text-sm font-medium mb-1">老人洗澡椅</p>
              <p class="text-xs text-gray-500 mb-2">防滑设计 安全舒适</p>
              <button class="exchange-btn w-full">立即兑换</button>
            </div>
          </a>
        </div>
      </div>
      
      <!-- 服务商品区块 -->
      <div id="service-section">
        <h2 class="section-title mb-4">服务商品</h2>
        
        <div class="grid grid-cols-2 gap-4">
          <a href="service_detail.html" class="card bg-white p-3">
            <div class="bg-gray-100 rounded-lg h-32 flex items-center justify-center mb-2">
              <i class="fas fa-user-nurse text-3xl text-gray-400"></i>
            </div>
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="point-tag">1000积分</span>
                <span class="text-xs text-gray-400">已兑换86</span>
              </div>
              <p class="text-sm font-medium mb-1">专业居家护理</p>
              <p class="text-xs text-gray-500 mb-2">专业护理人员上门</p>
              <button class="exchange-btn w-full">立即兑换</button>
            </div>
          </a>
          
          <a href="service_detail.html" class="card bg-white p-3">
            <div class="bg-gray-100 rounded-lg h-32 flex items-center justify-center mb-2">
              <i class="fas fa-hand-holding-medical text-3xl text-gray-400"></i>
            </div>
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="point-tag">800积分</span>
                <span class="text-xs text-gray-400">已兑换104</span>
              </div>
              <p class="text-sm font-medium mb-1">康复理疗服务</p>
              <p class="text-xs text-gray-500 mb-2">专业康复师指导</p>
              <button class="exchange-btn w-full">立即兑换</button>
            </div>
          </a>
          
          <a href="service_detail.html" class="card bg-white p-3">
            <div class="bg-gray-100 rounded-lg h-32 flex items-center justify-center mb-2">
              <i class="fas fa-utensils text-3xl text-gray-400"></i>
            </div>
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="point-tag">600积分</span>
                <span class="text-xs text-gray-400">已兑换132</span>
              </div>
              <p class="text-sm font-medium mb-1">营养餐配送</p>
              <p class="text-xs text-gray-500 mb-2">专为老人定制餐食</p>
              <button class="exchange-btn w-full">立即兑换</button>
            </div>
          </a>
          
          <a href="service_detail.html" class="card bg-white p-3">
            <div class="bg-gray-100 rounded-lg h-32 flex items-center justify-center mb-2">
              <i class="fas fa-home text-3xl text-gray-400"></i>
            </div>
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="point-tag">400积分</span>
                <span class="text-xs text-gray-400">已兑换178</span>
              </div>
              <p class="text-sm font-medium mb-1">居家清洁服务</p>
              <p class="text-xs text-gray-500 mb-2">专业保洁 全面消毒</p>
              <button class="exchange-btn w-full">立即兑换</button>
            </div>
          </a>
        </div>
      </div>
    </div>
    
    <!-- 兑换弹窗 -->
    <div id="exchangeModal" class="modal hidden">
      <div class="modal-content">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-lg font-medium">确认兑换</h3>
          <button id="closeModal" class="text-gray-400">
            <i class="fas fa-times"></i>
          </button>
        </div>
        
        <div class="text-center mb-4">
          <p class="text-sm mb-2">您将使用 <span class="text-red-500 font-bold">800积分</span> 兑换</p>
          <p class="font-medium">电子血压计</p>
        </div>
        
        <div class="mb-4">
          <label class="block text-sm text-gray-600 mb-1">收货人姓名</label>
          <input type="text" class="w-full border border-gray-300 rounded p-2 text-sm" placeholder="请输入姓名">
        </div>
        
        <div class="mb-4">
          <label class="block text-sm text-gray-600 mb-1">联系电话</label>
          <input type="text" class="w-full border border-gray-300 rounded p-2 text-sm" placeholder="请输入手机号">
        </div>
        
        <div class="mb-6">
          <label class="block text-sm text-gray-600 mb-1">收货地址</label>
          <input type="text" class="w-full border border-gray-300 rounded p-2 text-sm" placeholder="请输入详细地址">
        </div>
        
        <button class="w-full btn-primary py-2 rounded-lg">确认兑换</button>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 商品类型标签切换
      const typeTabs = document.querySelectorAll('.type-tab');
      const physicalSection = document.getElementById('physical-section');
      const serviceSection = document.getElementById('service-section');
      
      typeTabs.forEach(tab => {
        tab.addEventListener('click', function() {
          // 移除所有标签的激活状态
          typeTabs.forEach(t => t.classList.remove('active'));
          // 激活当前标签
          this.classList.add('active');
          
          // 根据标签显示对应内容
          const type = this.dataset.type;
          if (type === 'all') {
            physicalSection.style.display = 'block';
            serviceSection.style.display = 'block';
          } else if (type === 'physical') {
            physicalSection.style.display = 'block';
            serviceSection.style.display = 'none';
          } else if (type === 'service') {
            physicalSection.style.display = 'none';
            serviceSection.style.display = 'block';
          }
        });
      });
      
      // 兑换按钮点击事件
      const exchangeBtns = document.querySelectorAll('.exchange-btn');
      const exchangeModal = document.getElementById('exchangeModal');
      const closeModal = document.getElementById('closeModal');
      
      exchangeBtns.forEach(btn => {
        btn.addEventListener('click', function(e) {
          e.preventDefault();
          exchangeModal.classList.remove('hidden');
        });
      });
      
      closeModal.addEventListener('click', function() {
        exchangeModal.classList.add('hidden');
      });
      
      // 点击弹窗外部关闭
      exchangeModal.addEventListener('click', function(e) {
        if (e.target === exchangeModal) {
          exchangeModal.classList.add('hidden');
        }
      });
    });
  </script>
</body>
</html> 